<template>
  <div class="courseware-wrapper">
      <h2 @click="openFile">打开file</h2>
    <div v-for="(item,index) in filesList" :key="index+10000">
        <duv class="content">
            <div class="title flex-h" @click="goMore(item)"> 
                <img class="left" src='../../../../static/images/kejian1.png' alt="">
                <b class="flex1">{{item.name}}</b>
                <img class="right" src='../../../../static/images/com_icon_arrow_right_gray_32.png' alt="">
            </div>
            <div class="infos-box">
                <div class="infos flex-h" v-for="(i,$index) in item.children" :key="100+$index"><b class="flex1">{{i.name}}</b><i>查看</i></div>
            </div>    
        </duv>
        <div  class="graybar"></div>
    </div>
      <!-- <duv class="content">
          <div class="title flex-h"> 
              <img class="left" src='../../../../static/images/kejian2.png' alt="">
              <b class="flex1">九大学科教学课件</b>
              <img class="right" src='../../../../static/images/com_icon_arrow_right_gray_32.png' alt="">
          </div>
          <div class="infos-box">
              <div class="infos flex-h" v-for="i of 5" :key="i"><b class="flex1">疫情当下教育生态建设及班主任职责</b><i>查看</i></div>
          </div>    
      </duv>
      <div  class="graybar"></div>
      <duv class="content">
          <div class="title flex-h"> 
              <img class="left" src='../../../../static/images/kejian3.png' alt="">
              <b class="flex1">试卷</b>
              <img class="right" src='../../../../static/images/com_icon_arrow_right_gray_32.png' alt="">
          </div>
          <div class="infos-box">
              <div class="infos flex-h" v-for="i of 5" :key="i"><b class="flex1">疫情当下教育生态建设及班主任职责</b><i>查看</i></div>
          </div>    
      </duv>
      <div  class="graybar"></div> -->
  </div>
</template> 
<script>
import { getFiles, getFilesTree } from "../../../api/teacherApi";
export default {
  data () {
    return {
        filesList:[]
    }
  },
  watch: {},
  mounted () {
      this.getFilesTree()
  },
  methods: {
      openFile(){
          wx.downloadFile({
          url: 'https://static.shengxue985.com/sxzx_web/images/c2.png',
          success: function (res) {
            var filePath = res.tempFilePath
            wx.openDocument({
              filePath: filePath,
              success: function (res) {
                console.log('打开文档成功')
              }
            })
          }
        })
      },
      
      getFilesTree(){
        getFilesTree(0,2,10).then(res=>{
            if(res.code === '0'){
                this.filesList = res.data
            }
        })
      },
      goMore(){
          this.$mpvue.jump('../courseMore/main')
      }
  }
}
</script>

<style scoped lang="less">
.flex1{
    flex:1
}
.flex-h,
.flex-v {
  display: flex;
  align-items: center;
  justify-content: center;
}
.content{
    height: auto;
    .title{
            width: 690rpx;
             height: auto;
             margin:  20rpx auto 0;
             padding-bottom: 10rpx;
             border-bottom: 1rpx solid #EFEFEF;
             padding-left: 10rpx;
             box-sizing: border-box;
             .left{
                 width: 80rpx;
                 height: 80rpx;
             }
             b{
                font-size:36rpx;
                font-weight:bold;
                color:rgba(34,34,34,1);
                padding-left: 20rpx;
                box-sizing: border-box;
                width: 550rpx;
                overflow: hidden;
                text-overflow: ellipsis;
                display: inline-block;
                white-space: nowrap;


             }
             .right{
                width: 32rpx;
                height: 32rpx;
             }
         }
         .infos-box{
             width: 690rpx;
             height: auto;
             margin:  0 auto;
             .infos{
                 height: 100rpx;
                 padding-left: 10rpx;
                 box-sizing: border-box;
                 b{
                    font-size:30rpx;
                    font-weight:500;
                    color:rgba(34,34,34,1);
                    width: 550rpx;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: inline-block;
                    white-space: nowrap;
                 }
                 i{
                     width:90rpx;
                    height:40rpx;
                    background:rgba(247,247,250,1);
                    border-radius:20rpx;
                    text-align: center;
                    line-height: 40rpx;
                    font-size:24rpx;
                    font-weight:400;
                    color:rgba(153,153,153,1);
                 }
             }
         }
}
.graybar{
   height: 20rpx;
   background: #F7F7FA;
}
</style>
